<!--
 * @Author: AHANG
 * @Date: 2022-07-22 08:52:49
 * @LastEditors: AHANG
 * @LastEditTime: 2022-07-23 11:05:01
 * @Description: 
-->
<template>
  <v-app dark>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-sheet v-if="!miniVariant" class="pa-4">
        <v-avatar class="mb-4" size="64">
          <!-- <img src="/IMG.jpg" /> -->
          <NuxtLogo/>
        </v-avatar>
        <div class="font-italic">JIACHENG</div>
        <div class="font-italic">JIACHENG_NIi@outlook.com</div>
      </v-sheet>
      <v-divider></v-divider>
      <v-list nav dense>
        <v-list-item
          color="primary"
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar :clipped-left="clipped" fixed app height="50">
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-btn
        icon
        @click.stop="miniVariant = !miniVariant"
        v-if="disappear ^ !drawer"
      >
        <v-icon>mdi-{{ `chevron-${miniVariant ? "right" : "left"}` }}</v-icon>
      </v-btn>
      <v-btn icon @click="switchTheme()">
        <v-icon size="16">mdi-{{ `brightness-${Switch ? "2" : "7"}` }}</v-icon>
      </v-btn>
      <v-toolbar-title v-text="title" />
      <v-spacer />
      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
        <v-icon>mdi-menu</v-icon>
      </v-btn>
    </v-app-bar>
    <v-main>
      <!-- <v-container> -->
      <Nuxt />
      <!-- </v-container> -->
    </v-main>
    <v-navigation-drawer v-model="rightDrawer" right="right" temporary fixed>
      <v-list> </v-list>
    </v-navigation-drawer>
    <v-footer :absolute="!fixed" app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: "DefaultLayout",
  data() {
    return {
      disappear: true,
      Switch: false,
      clipped: true, //设置侧边栏浮动
      drawer: false, //抽屉默认关闭
      fixed: true, //设置底部浮动
      items: [
        {
          icon: "mdi-apps",
          title: "Welcome",
          to: "/home",
        },
        {
          icon: "mdi-account-multiple",
          title: "Account",
          to: "/account",
        },
        {
          icon: "mdi-chart-bubble",
          title: "Tool",
          to: "/tool",
        },
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: "Nuxt",
    };
  },
  created() {
    // var cip = returnCitySN["cip"];
    // var cname = returnCitySN["cname"];
    // console.log(cip); //cip就是本机ip地址
    // console.log(cname); //
  },
  methods: {
    switchTheme() {
      this.Switch = !this.Switch;
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
    },
  },
  watch: {},
  mounted() {
    if (document.body.clientWidth < 500) {
      this.disappear = false;
    } else {
      this.disappear = true;
    }
  },
};
</script>
<style>
/*全局滚动条样式*/
::-webkit-scrollbar {
  width: 5px;
  height: 14px;
}

::-webkit-scrollbar-thumb {
  /* background-color: #01c8dc;
  border-radius: 3px; */
  background-color: #b6b6b6;
}
/*全局滚动条样式结束*/
</style>